<template>
    <view class="pb-150">
        <!-- 导航栏 -->
        <image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill"></image>
        <u-navbar title="课件详情" :autoBack="true" leftIconColor="#fff" bgColor="transparent"
            :titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder></u-navbar>

        <view class="detail-wrap">
            <!-- 视频播放器（如果有URL） -->
            <video v-if="detail.url" class="player" :src="detail.url" controls playsinline webkit-playsinline></video>
            <view v-else class="no-video">
                <text>暂无视频内容</text>
            </view>

            <view class="title-row">
                <text class="title">{{ detail.coursewareName || detail.title || '课件' }}</text>
                <text class="pv">观看人数：{{ detail.browseCnt || 0 }}</text>
            </view>
            <view class="meta">课件类别：{{ getTypeText(detail.coursewareType) }}</view>
            <view class="desc">简介：{{ detail.content || detail.desc || '-' }}</view>

            <view class="footer-info">
                <text class="mb-20">上传人：{{ detail.createBy || detail.name || '-' }}</text>
                <text class="mb-20">上传时间：{{ formatTime(detail.createTime) || detail.time || '-' }}</text>
            </view>

            <view class="btn-download" v-if="detail.file" @click="downloadFile">下载课件</view>
            <view class="btn-download disabled" v-else>暂无文件可下载</view>
        </view>
    </view>
</template>

<script>
import navbarMixin from '@/common/navbarMixin'
import { getCoursewareDetail } from '@/api/economicforest'

export default {
	mixins: [navbarMixin],
    data() {
        return {
            detail: {
                coursewareName: '', 
                coursewareType: '', 
                createBy: '', 
                createTime: '', 
                content: '', 
                browseCnt: 0, 
                url: '',
                file: null
            },
            loading: false
        }
    },
    async onLoad(query){
        try {
            // 优先使用ID获取详情
            if(query && query.id){
                await this.getDetailById(query.id)
            } else if(query && query.data){
                // 兼容旧方式，使用传递的数据
                const data = JSON.parse(decodeURIComponent(query.data))
                this.detail = {
                    coursewareName: data.coursewareName || data.title || '课件',
                    coursewareType: data.coursewareType || data.type || '1',
                    createBy: data.createBy || data.name || data.uploader || '未知',
                    createTime: data.createTime || data.time || '',
                    content: data.content || data.desc || '暂无简介',
                    browseCnt: data.browseCnt || 0,
                    url: data.url || '',
                    file: data.file || null
                }
            }
        } catch(e){
            console.log('解析参数失败', e)
            uni.showToast({
                title: '加载失败',
                icon: 'none'
            })
        }
    },
    methods: {
        // 根据ID获取详情
        async getDetailById(id) {
            if(this.loading) return
            
            this.loading = true
            try {
                const response = await getCoursewareDetail(id)
                console.log('课件详情数据:', response)
                
                if(response && response.data) {
                    this.detail = response.data
                }
            } catch(error) {
                console.error('获取课件详情失败:', error)
                uni.showToast({
                    title: '获取详情失败',
                    icon: 'none'
                })
            } finally {
                this.loading = false
            }
        },
        // 获取类型文本
        getTypeText(type) {
            const typeMap = {
                '1': '技术培训',
                '2': '防护知识', 
                '3': '政策宣讲'
            }
            return typeMap[type] || '未知类型'
        },
        // 格式化时间
        formatTime(timeStr) {
            if (!timeStr) return ''
            return timeStr.substring(0, 19) // 显示到秒
        },
        downloadFile(){
            if(this.detail.file) {
                // 下载文件
                uni.downloadFile({
                    url: this.detail.file,
                    success: (res) => {
                        if (res.statusCode === 200) {
                            uni.openDocument({
                                filePath: res.tempFilePath,
                                success: function (res) {
                                    console.log('打开文档成功');
                                }
                            });
                        }
                    },
                    fail: (err) => {
                        uni.showToast({
                            title: '下载失败',
                            icon: 'none'
                        })
                    }
                });
            } else {
                uni.showToast({ 
                    title: '暂无文件可下载', 
                    icon: 'none' 
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.mine-navbar-bg { position: fixed; top: 0; left: 0; width: 750rpx;  z-index: 1; }
.detail-wrap { background: #fff; margin: 20rpx; padding: 20rpx; border-radius: 16rpx; box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06); }
.player { width: 100%; height: 360rpx; background: #000; border-radius: 12rpx; }
.no-video { width: 100%; height: 360rpx; background: #f0f0f0; border-radius: 12rpx; display: flex; align-items: center; justify-content: center; }
.title-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16rpx; }
.title { font-size: 32rpx; font-weight: 600; color: #333; }
.pv { color: #666; font-size: 24rpx; }
.meta { margin-top: 12rpx; color: #333; font-size: 26rpx; }
.desc { margin-top: 12rpx; color: #333; font-size: 26rpx; line-height: 1.7; }
.footer-info { display: flex;flex-direction: column; justify-content: space-between; color: #9aa0a6; margin: 10rpx 0; }
.btn-download { width: 100%; height: 88rpx; background: #0A993B; border-radius: 12rpx; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30rpx; }
.btn-download.disabled { background: #ccc; color: #666; }
</style>